<template>
  <div class="forget-password">
    <h2>忘记密码：</h2>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">

      <el-form-item label="绑定账号" prop="bindAccount">
        <el-radio-group v-model="form.bindType" @change="clearBindAccountInput">
          <el-radio  label="phoneNumber">手机号码</el-radio>
          <el-radio  label="email">电子邮箱</el-radio>
        </el-radio-group>
        <el-input v-model="form.bindAccount" :maxlength="form.bindType === 'phoneNumber' ? 11 : null "></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input show-password v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="password_c">
        <el-input show-password v-model="form.password_c"></el-input>
      </el-form-item>

      <el-form-item label="验证码"  prop="authCode">
        <el-input v-model="form.authCode" maxlength="6" style="width: 6rem" ></el-input>
        <el-button class="authcode-button" @click="getAuthCode" :disabled="disabled=!show" type="primary" >
          <span v-show="show">发送</span>
          <span v-show="!show" class="count">{{count}} s后可再次发送</span>
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" >注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ForgetPassword',
  data () {
    var validatePW = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.password_c !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePWC = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateBindAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入绑定账号'))
      } else if (!this.checkBindAccount()) {
        callback(new Error('请注意输入格式!'))
      } else {
        callback()
      }
    }
    return {
      show: true,
      count: '',
      timer: null,
      form: {
        bindAccount: '',
        bindType: 'phoneNumber',
        authCode: '',
        password: '',
        password_c: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符' },
          { whitespace: 'true', message: '不得只有空格' },
          { pattern: /^\w{2,30}$/, message: '只能是2到30位字母，数字，下划线，减号' }
          // { validator: validateUserName }
        ],
        bindAccount: [
          { required: true, message: '请输入绑定账号' },
          { whitespace: 'true', message: '不得包含空格' },
          { validator: validateBindAccount }
        ],
        password: [
          { required: true, message: '请输入密码' },
          { min: 8, max: 40, message: '长度在 8 到 40 个字符' },
          { validator: validatePW }
        ],
        password_c: [
          { required: true, message: '请再次输入密码' },
          { min: 8, max: 40, message: '长度在 8 到 40 个字符' },
          { validator: validatePWC }
        ],
        authCode: [
          { required: true, message: '请输入验证码' },
          { validator: validatePWC }
        ]
      }

    }
  },
  methods: {
    onSubmit () {

    },

    getAuthCode () {
      // 验证手机号
      if (!this.checkBindAccount()) {
        this.$message.error('请填写正确的绑定账号')
        return false
      } else {
        const TIME_COUNT = 60 // 更改倒计时时间
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer) // 清除定时器
              this.timer = null
            }
          }, 1000)
        }
      }
    },
    checkBindAccount () {
      if (this.form.bindType === 'phoneNumber') {
        const phone = this.form.bindAccount
        return /^1[3456789]\d{9}$/.test(phone)
      } else if (this.form.bindType === 'email') {
        const email = this.form.bindAccount
        return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)
      }
    },
    clearBindAccountInput () {
      this.form.bindAccount = ''
    }
  }
}
</script>

<style scoped>

</style>
